<!-- 首页 -->
<template>
	<view class="content">
		<view class="search" @click="jumpSou()">搜索</view>
		<!-- 歌曲排行推荐 -->
		<view class="music_tj flex justify-between align-center">
			<view class="title">歌曲推荐</view>
			<view class="more">更多></view>
		</view>
		<!-- 歌曲列表 -->
		<view class="music_list">
			<view class="music_item flex align-center" v-for="(im, ix) in songRomList" :key="ix" @click="jumpMusicDetail(im.id)">
				<view class="music_item_pic"><image :src="im.album.picUrl" class="pic" mode=""></image></view>
				<view class="music_item_txt flex column justify-around">
					<view class="title">{{im.album.name}}</view>
					<view class="desc">{{im.album.artists[0].name}}-{{im.album.name}}</view>
				</view>
				<view class="icon iconfont icon-jiantou"></view>
			</view>
		</view>
		<!-- 热门歌单 -->
		<view class="music_tj flex justify-between align-center">
			<view class="title">热门歌单</view>
			<view class="more">更多></view>
		</view>
		<!-- 热门歌曲列表 -->
		<view class="hot_music">
			<scroll-view class="scroll-view_H flex" enable-flex style="height:300rpx" scroll-x scroll-left="120">
				<view class="music_item" v-for="(im, ix) in hotList" :key="ix">
					<view class="music_item_pic">
						<image class="pic" :src="im.picUrl" mode=""></image>
						<view class="player flex align-center ">
							<i class="icon iconfont icon-bofangliangzuo12" style="font-size: 24rpx;color: #fff;"></i>
							938.9万
						</view>
					</view>
					<view class="txt">{{ im.name }}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 推荐小程序 -->
		<view class="music_tj flex justify-between align-center"><view class="title">推荐小程序</view></view>
		<!-- 推荐小程序列表 -->
		<view class="small_exe flex justify-around">
			<view class="item flex column align-center" v-for="(im, ix) in appletList" :key="im.id">
				<view class="small_exe_pic"><image :src="im.url" class="pic" mode=""></image></view>
				<view class="txt">{{im.title}}</view>
			</view>
		</view>
		<!-- 官方歌单 -->
		<view class="music_tj flex justify-between align-center">
			<view class="title">官方歌单</view>
			<view class="more">更多></view>
		</view>
		<!-- //官方歌单列表 -->
		<view class="hot_music">
			<scroll-view class="scroll-view_H flex" enable-flex style="height:300rpx" scroll-x scroll-left="120">
				<view class="music_item" v-for="(im, ix) in officialList" :key="ix">
					<view class="music_item_pic">
						<image class="pic" :src="im.picUrl" mode=""></image>
						<view class="player flex align-center ">
							<i class="icon iconfont icon-bofangliangzuo12" style="font-size: 24rpx;color: #fff;"></i>
							938.9万
						</view>
					</view>
					<view class="txt">{{im.name}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 巅峰榜 -->
		<view>
			<view class="music_tj flex justify-between align-center"><view class="title">巅峰榜</view></view>
			<view class="ranking">
				<!-- 每一项 -->
				<view class="ranking_item flex justify-between" v-for="(im, ix) in rankingList" :key="ix">
					<view class="ranking_left">
						<view class="title">{{im.name}}</view>
						<view class="text" v-for="(ims, ixs) in im.tracks.slice(0,3)" :key="ixs">{{ixs+1}}.{{ims.name}} - {{ims.ar[0].name}}</view>
					</view>
					<view class="ranking_right">
						<view class="music_item_pic">
							<image class="pic" :src="im.coverImgUrl" mode=""></image>
							<view class="player flex align-center ">
								<i class="icon iconfont icon-bofangliangzuo12" style="font-size: 24rpx;color: #fff;"></i>
								938.9万
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../utils/http/api.js';
export default {
	data() {
		return {
			hotList: [] ,//热门歌单
			officialList:[], //官方歌单
			// 小程序列表
			appletList:[
				{id:1,url:'../../static/music1.png',title:'听歌识曲'},
				{id:2,url:'../../static/music2.jpg',title:'歌词海报'},
				{id:3,url:'../../static/music3.jpg',title:'睡眠电台'}
			],
			rankingList:[],//热歌榜
			reHotList:[],
			songRomList:[]
		};
	},
	onLoad() {
		this.getSongSheet(); //获取歌单
		this.getRanking(); //获取排行榜
		this.getSongRom(); //推荐歌单
	},
	methods: {
		// 跳转到搜索
		jumpSou() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		// 歌曲推荐接口
		async getSongRom(){
			const res = await api ('/recommend/songs')
			this.songRomList = res.recommend.slice(0,6)
		},
		// 获取歌单接口
		async getSongSheet() {
			const res = await api('/personalized', { limit: 12 });
			// 热门歌单
			this.hotList = res.result.slice(0,6);
			// 官方歌单
			this.officialList = res.result.slice(6);
		},
		// 跳转音乐详情
		jumpMusicDetail(id) {
			uni.navigateTo({
				url: '../musicDetail/musicDetail?id='+id
			});
		},
		// 排行榜接口
		async getRanking(){
			// 热歌榜
			const resHot = await api('/top/list',{idx:1})
			// 飙升榜
			const resSoar = await api('/top/list',{idx:3})
			// 原创榜
			const resOriginal = await api('/top/list',{idx:2})
			// 热榜
			this.resHot = resHot.playlist
			// 飙升榜
			this.resSoar = resSoar.playlist
				// 原创榜
			this.resOriginal = resOriginal.playlist
			// 拼成一个数组
			this.rankingList.push(this.resHot,this.resSoar,this.resOriginal)
		}
	}
};
</script>
<!-- 	page{
	} -->
<style lang="less" scoped>
.content {
	padding: 0 20rpx;
}
.search {
	width: 100%;
	height: 60rpx;
	border-radius: 20rpx;
	background-color: #fff;
	font-size: 24rpx;
	line-height: 60rpx;
	padding-left: 40rpx;
	color: #c0c0c0;
}
// 歌曲推荐
.music_tj {
	margin-top: 50rpx;
	.title {
		font-size: 40rpx;
		font-weight: 800;
	}
	.more {
		font-size: 30rpx;
	}
}
//歌曲列表
.music_list {
	margin-top: 30rpx;
	.music_item {
		margin-bottom: 20rpx;
		.music_item_pic {
			width: 100rpx;
			height: 100rpx;
		}
		.music_item_txt {
			width: 550rpx;
			padding: 0 20rpx;
			.title {
				font-size: 34rpx;
			}
			.desc {
				font-size: 24rpx;
			}
		}
	}
}
// 热门歌曲  官方歌曲
.hot_music {
	margin-top: 30rpx;
	.scroll-view_H {
		.music_item {
			margin-right: 20rpx;
			.music_item_pic {
				width: 200rpx;
				height: 200rpx;
				position: relative;
				.player {
					color: #ffffff;
					height: 30rpx;
					border-radius: 22rpx;
					background-color: rgba(0, 0, 0, 0.3);
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 20rpx;
					padding: 8rpx 12rpx;
				}
			}
			.txt {
				margin-top: 10rpx;
				width: 200rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2; /* 指定显示文本的行数 */
				overflow: hidden; /* 超出隐藏 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
			}
		}
	}
}
//推荐小程序列表
.small_exe {
	margin-top: 30rpx;
	.item {
		.small_exe_pic {
			width: 150rpx;
			height: 150rpx;
		}
		.txt {
			margin-top: 10rpx;
		}
	}
}
// 巅峰榜列表
.ranking {
	margin-top: 30rpx;
	.ranking_item {
		margin-bottom: 20rpx;
		width: 100%;
		background-color: #e0e0e0;
		border-radius: 20rpx;
		.ranking_left {
			padding: 20rpx 0rpx 20rpx 15rpx;
			.title {
				font-size: 32rpx;
			}
			.text {
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
		.ranking_right {
			.music_item_pic {
				width: 200rpx;
				height: 100%;
				position: relative;
				.player {
					height: 30rpx;
					border-radius: 22rpx;
					background-color: rgba(0, 0, 0, 0.3);
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 20rpx;
					padding: 8rpx 12rpx;
				}
			}
		}
	}
}
</style>
